<template>
	<view>
		<view class="position-center login" v-if="handleType === 1">
			<view class="login-title">创建你的人类图</view>
			<u-button color="#000" open-type="getPhoneNumber" @click="goWriteName" @getphonenumber="onGetPhoneNumber">手机号一键登录</u-button>
		</view>
		<view class="position-center name" v-if="handleType === 2">
			<view style="margin-bottom: 30rpx">
				<u-form :labelStyle="{ fontSize: '30rpx' }" labelAlign="left" label-position="top" :model="formModel" :rules="formRules" ref="formRef">
					<u-form-item class="w-90" label="姓名" prop="userName">
						<u-input type="text" v-model="formModel.userName" border="surround" placeholder="请输入姓名"></u-input>
					</u-form-item>
				</u-form>
			</view>
			<u-button color="#000" @click="goWriteDate">下一步</u-button>
		</view>

		<view class="position-center birthdate" v-if="handleType === 3">
			<u-datetime-picker
				:minDate="0"
				:maxDate="maxDate"
				:show="showDatePicker"
				v-model="dateFormModel.timeDate"
				@confirm="dateConfirm"
				@cancel="dateCancel"
			></u-datetime-picker>
			<view style="margin-bottom: 30rpx; width: 100%">
				<u-form
					label-width="150rpx"
					:labelStyle="{ fontSize: '30rpx' }"
					labelAlign="left"
					label-position="top"
					:model="dateFormModel"
					:rules="dateFormRules"
					ref="dateFormRef"
				>
					<u-form-item label="时间:" prop="time">
						<u-input v-if="!showDatePicker" @focus="clickDateInput" v-model="dateFormModel.time" placeholder="请选择出生时间"></u-input>
					</u-form-item>
				</u-form>
			</view>
			<u-button color="#000" @click="goAddress">下一步</u-button>
		</view>
		<view class="position-center birthAddress" v-if="handleType === 4">
			<u-datetime-picker
				:minDate="0"
				:maxDate="maxDate"
				:show="showDatePicker"
				v-model="dateFormModel.timeDate"
				@confirm="dateConfirm"
				@cancel="dateCancel"
			></u-datetime-picker>
			<view style="margin-bottom: 30rpx; width: 100%">
				<u-form
					label-width="150rpx"
					:labelStyle="{ fontSize: '30rpx' }"
					labelAlign="left"
					label-position="top"
					:model="addressFormModel"
					:rules="addressFormRules"
					ref="addressFormRef"
				>
					<u-form-item label="地点:" prop="address">
						<u-input v-if="!showDatePicker" @focus="clickDateInput" v-model="addressFormModel.address" placeholder="请选择出生地点"></u-input>
					</u-form-item>
				</u-form>
			</view>
			<u-button color="#000" @click="goIndex">下一步</u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
//===================全局变量方法===================//
const handleType = ref(1);
function formatTimestamp(timestamp) {
	const date = new Date(timestamp);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
	const day = String(date.getDate()).padStart(2, '0');
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
	return formattedDate;
}
//===================登陆===================//

// 获取手机号
const onGetPhoneNumber = async (e) => {
	console.log(e.detail.code, 'e.detail.code');
};

const goWriteName = () => {
	handleType.value = 2;
};

const formModel = ref({ userName: '' });
const formRef = ref();
const formRules = ref({
	userName: [
		{
			type: 'string',
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}
	]
});
//===================设置生日===================//
const maxDate = ref(new Date().getTime());
const showDatePicker = ref(false);
const dateRef = ref();
const dateFormRules = ref({});
const dateFormModel = ref({
	time: '',
	timeDate: ''
});
const showAddressPicker = ref(false);
const addressRef = ref();
const addressFormRules = ref({});
const addressFormModel = ref({
	address: ''
});
const clickDateInput = () => {
	showDatePicker.value = true;
};

const goWriteDate = () => {
	formRef.value.validate().then((res) => {
		console.log(res, '校验结果');
		handleType.value = 3;
	});
};
const dateConfirm = (e) => {
	dateFormModel.value.time = formatTimestamp(e.value);
	showDatePicker.value = false;
};
const dateCancel = () => {
	showDatePicker.value = false;
};
const clickAddressInput = () => {
	showAddressPicker.value = true;
};

const addressConfirm = (e) => {
	addressFormModel.value.time = formatTimestamp(e.value);
	showAddressPicker.value = false;
};
const addressCancel = () => {
	showAddressPicker.value = false;
};
const goAddress = () => {
	handleType.value = 4;
};
const goIndex = () => {
	uni.reLaunch({
		url: '/pages/index/index?userName=' + formModel.value.userName
	});
};
</script>

<style lang="scss">
.position-center {
	width: 80%;
	height: 300rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

.login-title {
	text-align: center;
	margin-bottom: 50rpx;
	color: #000;
	font-weight: 800;
}
</style>
